<template>
<!-- nearby子组件 -->
  <div class="nearby">
    <h3 class="nearby__tittle">附近店铺</h3>
    <div class="nearby__list">
      <!-- 根据nearby.list中的数据循环渲染ShopInfo组件 -->
      <!-- 点击后进入相应商店详情页面 -->
      <router-link v-for="item in nearbyList.list" :key="item._id" :to="`/shop/${item._id}`" >
      <ShopInfo :item="item" :hide="false"/>
      </router-link>
    </div>
  </div>
</template>

<script>
import { reactive,onMounted } from "vue";
import { get } from "../../utils/post";
// 引入ShopInfo子组件
import ShopInfo from '../../components/ShopInfo'
// 设置getList方法
const getList = () => {
  // 设置nearbyList为一个响应式数据
  let nearbyList = reactive({list:[]});
  // 设置getNearbyList为一个同步发送ajax请求方法
  const getNearbyList = async () => {
    const result = await get("./api/shop/hot-list");
    if (result?.errno === 0 && result?.data?.length) {
      // nearbyList.push(result.data[0]);
      // nearbyList.push(result.data[1]);
      // 让nearbyList的list属性为接收到的result数据的data属性
      nearbyList.list=result.data;
    }
  };
  // 返回nearbyList和getNearbyList方法
  return { nearbyList,getNearbyList };
};

export default {
  name: "Nearby",
  // 使用ShopInfo子组件
  components:{ShopInfo},
  setup() {
    // 从getList方法中获取{ nearbyList,getNearbyList }
    const { nearbyList,getNearbyList } = getList();
    // 再页面挂在完毕后执行getNearbyList方法
    onMounted(getNearbyList());
    return { nearbyList };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
.nearby {
  a {
    display:block;
    text-decoration:none;
    -webkit-tap-highlight-color: transparent;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  p {
    margin: 0;
  }
  &__tittle {
    padding: 0.16rem 0 0.02rem;
    font-size: 0.18rem;
    color: $content-fontcolor;
    line-height: 0.25rem;
    margin: 0;
  }
}
</style>